웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[JavaScript] 공백(빈공간) 문자 제거하기, 없애기, 정규표현식 사용

Last Modified : 2017-12-13 / Created : 2014-08-29
171,893
View Count
공백제거를 위한 방법으로 PHP 또는 다른 많은 언어가 지원하는 trim() 내장함수가 자바스크립트에는 존재하지 않아 공백제거를 위한 다른 방법을 사용해야 합니다. 그런 이유로 정규표현식을 사용하거나 아니면 jQuery에서 지원하는 trim() 메소드등을 사용해야하죠.


아래에는 문자열에 포함된 공백을 삭제해야 할때 자바스크립트의 정규표현식을 사용하는 방법! 그리고 jQuery를 사용하는 방법에 대하여 알아보겠습니다. 먼저 jQuery의 trim() 메소드에 대하여 예제와 함께 알아보겠습니다.


! 그런데 공백 삭제(제거)는 언제 필요한가요?

많이 사용되는 공백 제거는 언제 필요하거나 사용할까요? 공백 제거를 하는 이유는 매우 많겠지만 아래의 경우에 주로 쓰입니다.

i. 웹페이지에 검색 기능을 구현하는 경우
- 이 경우 입력폼에 두개 이상의 빈공간이 실수로 들어가는 등 다양한 오류를 사전에 방지하기 위한 목적이거나 또는 둘 이상의 공백을 하나로 바꾸어 처리함

ii. 게시판 글을 짧게 만들어 간략하게 보여줄 때
- 예를들면 "더 알아보기" 등의 간략한 내용의 요약을 보여줄때 안에 있는 띄어쓰기와 많은 공백들을 줄이기 위한 목적으로 사용

iii. Url주소나 쿼리스트링, 파라미터 주소에 포함된 빈공간을 변경시
- 현재의 url 주소나 입력받은 주소등을 변경할 경우에 사용하기도 하며 또한 이메일을 입력값에 잘못된 공백이 있는 경우에도 자동으로 제거하기 위함

사실 위에 언급된 경우를 제외하고도 공백 제거는 웹개발의 많은 부분에서 필요할 것입니다. 그럼 아래부터는 실제로 웹사이트에서 구현되는 공백제거를 수행하는 방법과 예제를 더 자세하게 알아보도록 하겠습니다.



# jQuery를 이용한 trim() 메소드의 사용

trim() 함수를 사용하면 문자열의 앞과 뒤에 있는 공백을 제거할 수 있습니다. 즉 모든 공백을 삭제하는 것이 아니라는 점입니다.

문자열의 앞과 뒤 공백만 제거!!중간에 위치한 공백을 제거할 수는 없지만 맨 앞과 뒤에만 삭제가 필요한 경우 중간에 위치한 공백이 필요한 경우 더 유용할 수도 있겠습니다. 사용자가 이력한 값을 폼으로 전송받을 때 중복 조건으로 공백을 사용할 수 있겠죠. 이런 경우는 맨 앞 그리고 뒤 공백만 제거가 필요합니다. 그럼 어떻게 사용하는지 간단한 사용방법을 알아보겠습니다.



# trim() 메소드 사용예제 소스보기

만약 변수 test의 값이 아래와 같을때 앞 뒤 공백을 제거하기 위해 사용할 수 있습니다.
  var test = "   웹이즈프리 닷컴     ";
  test.trim(); // 앞과 뒤의 공백만 제거

  console.log(test);

위 코드의 실행 결과는 아래와 같습니다.
"웹이즈프리 닷컴" // 중간의 공백만 남기고 앞과 뒤의 공백은 모두 제거됨

참고로 trim() 메소드는 아래와 같은 방법으로도 사용이 가능하며 사용 방법상의 차이일뿐 구현되는 결과는 동일합니다.
$.trim("제거할 문자열")
편한 방법을 사용하면되고 결과는 동일하게 반환됩니다. 그렇다면 아래에서는 정규표현식을 사용한 방법에 대하여 알아봅니다.



# 정규표현식을 사용한 공백 제거 방법

trim() 메소드는 매우 유용한 방법이지만 중간의 공백을 제거할 수 없습니다. 사실 대부분의 서버사이드 언어인 trim() 함수는 대부분 비슷하게 처음과 끝 부분만 공백을 제거하는 기능을 가집니다.

하지만 만약, 중간의 공백을 제거하거나 더 다양한 방법이 필요하다면? 어떻게 해야할까요? 당연히 정규표현식을 사용하여야 할 것입니다. 우선 정규표현식을 사용한 공백제거 방법을 알아보겠습니다.


! 문자열에 위치한 모든 공백을 제거하는 예제

앞에서 언급한 것처럼 처음과 끝 뿐만아니라 만약 중간에 있는 모든 공백도 함께 제거할 경우 어떻게 해야할까요? 여러분이 알고 있는 것처럼 정규표현식(Regular Expression)을 사용하는 방법이 가장 효과적이고 편리한 방법입니다

그렇다면 실제로는 어떻게 사용하는지 아래의 정규표현식 예제와 함께 알아보세요.
var regText = "   123   45 6   ";    // 문자열을 regText변수에 저장함
regText.replace(/ /gi, "");    // 모든 공백을 제거

console.log(regText);

참고로 위에 있는 스크립트 정규식 코드는 아래와 같은 방법으로도 사용할 수도 있습니다. 아래 코드는 공백을 s로 바꾸었는데 s는 정규표현식에서 공백을 의미하는 코드로 사용됩니다. 이점을 기억하세요.
var regText = "    123 45 6  ";
regText.replace(/\s/gi, "");     // 위와 같이 모든 공백을 제거

console. log(regText);

둘 다 결과는 아래와 같이 모든 공백을 제거하여 다음과 같이 출력될 것입니다.
"abcdef" // 모든 공백이 제거됨

위에 사용된 s는 공백을 의미하듯 정규표현식에서는 수 많은 기호가 예약어로 사용될 수 있으며 이를 활용하여 정규표현식을 더 간단하고 쉽게 만들 수 있습니다. 참고로 위와 같은 예약어 사용시 이스케이프의 역슬래쉬를 앞에 추가합니다.

이렇게 사용되는 문법 기호는 굉장히 많습니다. 이 글의 하단에 대표적인 내용을 정리하도록 하겠습니다. 꼭 확인해 보세요.


! 맨 앞에 위치한 공백만 제거하는 예제

맨 앞에 위치한 공백만 제거하는 경우 아래와 같이 코드를 사용합니다.
var regText= " 123 456 ";
regText.replace(/^ /gi, ""); // 공백으로 시작된 부분만 제거

결과를 확인하면 아래와 같습니다.
"123 456 " // 앞에 시작된 공백만 제거됨


! 문자열 맨 뒤의 공백만 제거하는 예제

이번에는 앞 그리고 뒤의 공백을 함께 제거합니다.
regText = " abc def ";
regText.replace(/\s$/gi, ""); // 문자열 맨 뒤의 공백만 제거

실행 후 출력된 결과입니다.
" 123 456" // 뒤에 위치한 공백만 제거됨


! 앞과 뒤의 공백을 제거하는 방법은?

만약 앞 그리고 뒤 공백을 둘 다 제거하려면 어떻게 할까요? 소괄호()를 사용하여 해당하거나 하지 않는 경우를 찾으면 됩니다. 아래의 예제를 봐주세요.
testStr = ' banana apple ';
testStr.replace(/(^\s*)|(\s*$)/, '');

console.log(testStr);

결과는 아래와 같습니다.
banana apple // 중간의 공백은 무시하고 앞과 뒤의 공백만 제거함

제이쿼리의 trim() 함수와 동일하죠. 이 코드를 함수로 만들수도 있습니다. 만약 testStr을 trim()을 적용한다면 아래처럼 만들어 사용할 수 있습니다.
function trim() {
  return this.replace(/(^\s*)|(\s*$)/gi, "");
}
testStr.trim();


참고로 아래는 자주 쓰이는 정규표현식 기호입니다.

* : 뒤에 이어지는 문자까지 모두 선택
d : 숫자를 의미함
s : 공백을 의미함
^ : 시작하는 점을 의미함
$ : 끝나는 점을 의미함

더 자세한 내용이 궁금하시면 아래 링크를 참고해보세요.

[자바스크립트] Replace() 문자 변환, 치환 >
http://webisfree.com/2014-01-09/%5B%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%5D-replace%28%29-%EB%AC%B8%EC%9E%90-%EB%B3%80%ED%99%98-%EC%B9%98%ED%99%98

공백 제거 Regular Expression 정규표현 trim
아래의 글도 찾고 계시지 않나요?

Previous

[JQuery] 이벤트의 강제 실행, 커스텀 이벤트, trigger()

Previous

[자바스크립트] 백그라운드(background) 경로, 주소 불러오기, getComputedStyle()